import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {
  HomeIcon,
  HistoryIcon,
  PlayletIcon,
  MakeMoneyIcon,
  MyIcon,
} from '../kit/icon';
import HistoryScreen from '../screen/HistoryScreen';
import PlayLeftScreen from '../screen/PlayletScreen';
import MakeMoneyScreen from '../screen/MakeMoneyScreen';
import HomeScreen from '../screen/HomeScreen';
import MyScreen from '../screen/MyScreen';
import Header from '../kit/header';

const Tabs = createBottomTabNavigator();

type ScreenNames =
  | 'HomeScreen'
  | 'PlayLeftScreen'
  | 'HistoryScreen'
  | 'MakeMoneyScreen'
  | 'MyScreen';

const screenMap: Record<ScreenNames, string> = {
  HomeScreen: '短剧',
  PlayLeftScreen: '短剧推荐',
  HistoryScreen: '历史记录',
  MakeMoneyScreen: '赚钱',
  MyScreen: '我的',
};


const hideRouteNames:ScreenNames[] = ['HomeScreen','PlayLeftScreen','MakeMoneyScreen','MyScreen'];


const TabsNavigation = () => {
  return (
    <Tabs.Navigator
      initialRouteName="HomeScreen"
      screenOptions={({route}) => {
        return {
          tabBarActiveTintColor: '#FF813A',
          tabBarInactiveTintColor: '#333333',
          tabBarLabel: screenMap[route.name as ScreenNames],
          tabBarHideOnKeyboard:true, // 键盘弹出是隐藏tabbar
          // eslint-disable-next-line react/no-unstable-nested-components
          tabBarIcon: ({color, size}) => {
            switch (route.name) {
              case 'HomeScreen':
                return (
                  <HomeIcon
                    fillEnd={color}
                    fillStart={color}
                    size={size as unknown as string}
                  />
                );
              case 'PlayLeftScreen':
                return (
                  <PlayletIcon size={size as unknown as string} fill={color} />
                );
              case 'HistoryScreen':
                return (
                  <HistoryIcon size={size as unknown as string} fill={color} />
                );
              case 'MakeMoneyScreen':
                return (
                  <MakeMoneyIcon
                    size={size as unknown as string}
                    fill={color}
                  />
                );
              case 'MyScreen':
                return <MyIcon size={size as unknown as string} fill={color} />;
            }
          },
          // eslint-disable-next-line react/no-unstable-nested-components
          header: () => {
            if(hideRouteNames.some(routeName=>routeName === route.name)){
              return <></>;
            }else{
              return <Header title={screenMap[route.name as ScreenNames]} isHideLeft={true} isHideRight={true}/>;
            }
          },
        };
      }}>
      <Tabs.Screen component={HomeScreen} name="HomeScreen" />
      <Tabs.Screen component={PlayLeftScreen} name="PlayLeftScreen" />
      <Tabs.Screen component={HistoryScreen} name="HistoryScreen" />
      <Tabs.Screen component={MakeMoneyScreen} name="MakeMoneyScreen" />
      <Tabs.Screen component={MyScreen} name="MyScreen" />
    </Tabs.Navigator>
  );
};

export default TabsNavigation;
